---
title: Dimming the Background
description: Control the bottom sheet's dimming behavior.
keywords: [bottom sheet dimming, bottom sheet background, inline bottom sheet, maps bottom sheet]
---

import dimming from './dimming.gif'

One of the most common use cases for a Bottom Sheet is to present it while still allowing users to interact with background components, such as in a Maps app.

In this guide, you can configure `TrueSheet` to achieve this exact functionality.

<img alt="dimming" src={dimming} width="300"/>

## How?

You can easily disable the dimmed background of the sheet by setting [`dimmed`](/reference/configuration#dimmed) to `false`.

```tsx {5}
export const App = () => {
  return (
    <TrueSheet
      detents={['auto', 0.69, 1]}
      dimmed={false}
    >
      <View />
    </TrueSheet>
  )
}
```

### Dimmed by Detent Index

To further customize the dimming behavior, [`dimmedDetentIndex`](/reference/configuration#dimmeddetentindex) is also available. Set the [detent](/reference/configuration#detents) `index` at which you want the sheet to start dimming.

```tsx {5}
export const App = () => {
  return (
    <TrueSheet
      detents={['auto', 0.69, 1]}
      dimmedDetentIndex={1} // Dim will start at 69% ✅
    >
      <View />
    </TrueSheet>
  )
}
```

:::info
`dimmedDetentIndex` is ignored if `dimmed` is set to `false`.
:::

## Customizing Dimming Alpha

You can dynamically control the dimming opacity based on the sheet's position using `ReanimatedTrueSheet` with `animatedPosition`.

:::tip
Learn more about Reanimated integration in the [Reanimated guide](/guides/reanimated).
:::

```tsx {2-3,7,9-11,14-21}
import { ReanimatedTrueSheet, ReanimatedTrueSheetProvider, useReanimatedTrueSheet } from '@lodev09/react-native-true-sheet/reanimated'
import Animated, { useAnimatedStyle } from 'react-native-reanimated'
import { StyleSheet } from 'react-native'

export const App = () => {
  return (
    <ReanimatedTrueSheetProvider>
      <View style={styles.container}>
        <CustomBackdrop />
        <Sheet />
      </View>
    </ReanimatedTrueSheetProvider>
  )
}

const CustomBackdrop = () => {
  const { animatedPosition } = useReanimatedTrueSheet()

  const backdropStyle = useAnimatedStyle(() => ({
    opacity: animatedPosition.value * 0.5, // Adjust multiplier for desired alpha
  }))

  return <Animated.View style={[StyleSheet.absoluteFill, styles.backdrop, backdropStyle]} />
}

const Sheet = () => {
  return (
    <ReanimatedTrueSheet
      detents={[0.25, 0.5, 1]}
      dimmed={false}
    >
      <View />
    </ReanimatedTrueSheet>
  )
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  backdrop: {
    backgroundColor: 'black',
  },
})
```

This allows you to create custom dimming effects that respond to the sheet's movement in real-time.
